<script setup lang="ts">
import {computed} from "vue"
import BaseHeader from "@/views/components/BaseHeader.vue";
import {useSiteStore} from "@/store/modules/site.ts"
const jump = () => {
  window.api.open("https://support.qq.com/product/621607");
}
const mainHeight=computed(()=>{
  return `calc(100vh - 140px)`;
});
</script>
<template>
  <div>
    <el-container>
      <el-header height="54px">
        <BaseHeader/>
      </el-header>
      <el-main>
        <div :style="{'height':mainHeight}">
          <template v-if="useSiteStore().state">
            <router-view v-slot="{ Component,route }">
              <transition :name="route.meta.transition||'fade'">
                <keep-alive>
                  <component :is="Component"/>
                </keep-alive>
              </transition>
            </router-view>
          </template>
        </div>
      </el-main>
      <el-footer height="40px">
        <div class="footer">
          <div></div>
          <div>
            <el-link @click="jump"><el-icon style="padding-right: 5px"><Message /></el-icon> 分享宝贵建议</el-link>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.main-container {
  padding: 5px;
  overflow-y: auto;
  max-height: calc(100vh - 67px);
}
.footer{
  padding: 0 20px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>